<template>
  <div>
    <el-form style="text-align: left" class="indexell">
      <el-form-item label="被查询人姓名:" label-width="100px">
        <el-input
          v-model="form.name"
          class="indexBOX"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="身份证号码:" label-width="100px">
        <el-input v-model="form.idCard" placeholder="需完整填写"></el-input>
      </el-form-item>
      <el-form-item label="查询范围:" class="itemSTyle" label-width="100px">
        <el-input
          style="width: 22%"
          placeholder="法院涉诉综合查询    法院失信与被执行人查询"
          :disabled="true"
        ></el-input>
        <el-button class="buttonStyle" @click="queryData">查询</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <div class="Maxbox">
        <section>
          <div
            style="
              width: 158px;
              text-align: left;
              font-size: 18px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              height: 14px;
              line-height: 21px;
              color: #333333;
              margin-bottom: 29px;
              font-weight: bold;
            "
          >
            法院失信与执行人查询:
          </div>
          <!-- <div v-if="retrieveData.length===0" class="dataStyle">
            暂无数据~
          </div> -->
          <div class="dataStyle" v-if="infoerror">
            {{ msg }}
          </div>
          <div class="dataStyle" v-if="infoerror1">
            {{ msg }}
          </div>
          <div v-if="promises">
            <div
              v-for="(item, index) in retrieveData"
              :key="index"
              class="boxStyle"
            >
              <div class="indexStyle">
                <label class="spanStyle">案号：</label>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.caseCode"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.caseCode }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <span class="spanStyle">法院号：</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.courtId"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.courtId }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <span class="spanStyle">法院名：</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.courtName"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.courtName }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <label class="spanStyle">身份证号：</label>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.identityNo"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.identityNo }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <label class="spanStyle">立案时间：</label>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.regDate"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.regDate }}</span>
                </el-tooltip>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div
            style="
              width: 117px;
              text-align: left;
              font-size: 18px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              height: 14px;
              line-height: 21px;
              color: #333333;
              margin-bottom: 29px;
              font-weight: bold;
              margin-top: 111px;
            "
          >
            法院涉诉综合查询:
          </div>
          <div class="dataStyle" v-if="errData">
            {{ msgs }}
          </div>
          <div class="dataStyle" v-if="errData1">
            {{ msgs }}
          </div>
          <!-- <div v-if="courtData.length === 0" class="dataStyle">暂无数据~</div> -->
          <div v-if="litigation">
            <div
              v-for="(item, index) in courtData"
              :key="index"
              class="boxStyle"
            >
              <div class="indexStyle">
                <label class="spanStyle">案件号：</label>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.caseNo"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.caseNo }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <span class="spanStyle">法院：</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.court"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.court }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <span class="spanStyle">文书公告ID：</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.cpwsId"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.cpwsId }}</span>
                </el-tooltip>
              </div>
              <!-- <div class="indexStyle">
              <label class="spanStyle">身份证号：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.identityNo"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.identityNo }}</span>
              </el-tooltip>
            </div> -->
              <div class="indexStyle">
                <label class="spanStyle">排序时间：</label
                ><el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.sortTime"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.sortTime }}</span>
                </el-tooltip>
              </div>
              <div class="indexStyle">
                <label class="spanStyle">标题：</label>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.title"
                  placement="top-start"
                >
                  <span class="labelStyles">{{ item.title }}</span>
                </el-tooltip>
              </div>
              <div>
                <label class="spanStyle">主体：</label
                ><span>{{ item.body }}</span>
              </div>
            </div>
          </div>
        </section>
        <!-- <div
          style="
            width: 117px;
            text-align: left;
            font-size: 18px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            height: 14px;
            line-height: 21px;
            color: #333333;
            margin-bottom: 29px;
            margin-top: 111px;
            font-weight: bold;
          "
        >
          税务负面信息查询:
        </div> -->
        <!-- <div v-if="taxInfo.length===0" class="dataStyle">暂无数据~</div> -->
        <!-- <section> -->
        <!-- <div style="text-align: left">法院失信与被执行人查询:</div> -->
        <!-- <p style="text-align:left;">法院失信与被执行人查询:</p> -->

        <!-- <div v-for="(item, index) in taxInfo" :key="index" class="boxStyle">
            <div class="indexStyle">
              <span class="labelStyle">区域名称：</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.areaName"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.areaName }}</span>
              </el-tooltip>
            </div> -->
        <!-- <div class="indexStyle">
              <span class="labelStyle">组代号码办证日期：</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.bizDate"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.bizDate }}</span>
              </el-tooltip>
            </div> -->

        <!-- <div class="indexStyle">
              <label class="labelStyle">黑名单类型：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.blackType"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.blackType }}</span>
              </el-tooltip>
            </div>
            <div class="indexStyle">
              <label class="labelStyle">证件号码：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.cardNo"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.cardNo }}</span>
              </el-tooltip>
            </div> -->

        <!-- <div class="indexStyle">
              <label class="labelStyle">信息来源网址：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.crawlSource"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.crawlSource }}</span>
              </el-tooltip>
            </div>

            <div class="indexStyle">
              <label class="labelStyle">认定日期或所属日期：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.evalDate"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.evalDate }}</span>
              </el-tooltip>
            </div>

            <div class="indexStyle">
              <label class="labelStyle">组代号码到期日期：</label
              ><el-tooltip
                class="item"
                effect="dark"
                :content="item.expireDate"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.expireDate }}</span>
              </el-tooltip>
            </div> -->

        <!-- <div class="indexStyle">
              <label class="labelStyle">法定代表人(负责人)姓名：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.frName"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.frName }}</span>
              </el-tooltip>
            </div> -->

        <!-- <div class="indexStyle">
              <label class="labelStyle">组织机构代码：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.orgCode"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.orgCode }}</span>
              </el-tooltip>
            </div>
            <div class="indexStyle">
              <label class="labelStyle">组代号码注册日期：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.regDate"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.regDate }}</span>
              </el-tooltip>
            </div>
            <div class="indexStyle">
              <label class="labelStyle">纳税人名称：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.regName"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.regName }}</span>
              </el-tooltip>
            </div> -->
        <!-- <div class="indexStyle">
              <label class="labelStyle">企业注册号：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.regNo"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.regNo }}</span>
              </el-tooltip>
            </div>
            <div class="indexStyle">
              <label class="labelStyle">登记户类别:</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.regType"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.regType }}</span>
              </el-tooltip>
            </div> -->
        <!-- <div class="indexStyle">
              <label class="labelStyle">税务管理代码:</label
              ><span>{{ item.taxManageNo }}</span>
            </div> -->
        <!-- <div class="indexStyle">
              <label class="labelStyle">纳税人识别码：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.taxNo"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.taxNo }}</span>
              </el-tooltip>
            </div>
            <div class="indexStyle">
              <label class="labelStyle">信息发布税务局：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.taxOrg"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.taxOrg }}</span>
              </el-tooltip>
            </div>
            <div class="indexStyle">
              <label class="labelStyle">税务局分类：</label
              ><el-tooltip
                class="item"
                effect="dark"
                :content="item.taxOrgType"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.taxOrgType }}</span>
              </el-tooltip>
            </div>
            <div class="indexStyle">
              <label class="labelStyle">组代号码办证机构名：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.bizOrg"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.bizOrg }}</span>
              </el-tooltip>
            </div>
            <div class="indexStyle">
              <label class="labelStyle">生产经营地址：</label>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.address"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.address }}</span>
              </el-tooltip>
            </div> -->
        <!-- </div> -->
        <!-- </section> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downButton">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  PromiseQuery,
  courtInfo,
  // taxData,
  identity,
  getOrderTable,
} from "../../assets/js/api";
export default {
  // props:['userData'],
  data() {
    return {
      form: {
        name: "", //姓名!
        idCard: "", //身份证号码!
      },
      orderNumber: "", //订单号!
      dialogVisible: false, //打开风控大数据查询弹窗!
      courtData: [], //查询用户的法院涉诉!
      retrieveData: [], //执行人检索!
      // taxInfo: [], //税务负面信息!
      promises: false, //法院失信与执行人查询内容区域开关!
      litigation: false, //法院综合查询区域开关!
      infoerror: false, //法院失信与执行人数据错误开关!!
      infoerror1: false, //法院失信与执行人暂无数据开关!
      msg: "", //法院失信与执行人查询错误信息message!

      errData: false, //法院涉诉综合查询错误信息开关!
      msgs: "", //法院涉诉综合查询错误信息message!
      errData1: false, //法院涉诉综合查询暂无数据开关!
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 获取被查询人资料!
    getUserInfo() {
      this.orderNumber = sessionStorage.getItem("orderNumber");
      getOrderTable(this.orderNumber).then((res) => {
        this.form.name = res.data.basicBorrowerName;
        this.form.idCard = res.data.basicBorrowerCard;
      });

      // console.log('123',this.userData)
      // this.form.name = this.userData.userName;
      // this.form.idCard =this.userData.basicBorrowerCard;
    },
    //打开风控大数据查询弹窗!
    queryData() {
      if (this.form.name == "" || this.form.idCard == "") {
        this.$message.error("请输入完整的查询信息");
      } else {
        identity(this.form).then((res) => {
          if (res.code == 500) {
            this.$message.error(res.message);
          } else {
            this.dialogVisible = true;
            PromiseQuery(this.form).then((res) => {
              if (res.data == null) {
                this.infoerror = true;
                this.msg = res.message;
              }
              if (res.code == 200 && res.data.length === 0) {
                this.infoerror1 = true;
                this.msg = "暂无数据~";
              } else if (res.code == 200) {
                this.promises = true;
                this.retrieveData = res.data;
              }
            });
            courtInfo(this.form).then((res) => {
              if (res.data == null) {
                this.errData = true;
                this.msgs = res.message;
              }
              if (res.code == 200 && res.data.length === 0) {
                this.errData1 = true;
                this.msgs = "暂无数据~";
              } else if (res.code == 200) {
                this.courtData = res.data;
                this.litigation = true;
              }
            });
            // taxData(this.form).then((res) => {
            //   this.taxInfo = res.data;
            // });
          }
        });
      }
    },
    //弹出层关闭按钮!
    downButton() {
      this.dialogVisible = false;
      this.infoerror = false;
      this.infoerror1 = false;
      this.errData = false;
      this.errData1 = false;
      this.promises = false;
      this.litigation = false;
    },
    //弹出层右上角的监听事件!
    handleClose() {
      this.dialogVisible = false;
      this.infoerror = false;
      this.infoerror1 = false;
      this.errData = false;
      this.errData1 = false;
      this.promises = false;
      this.litigation = false;
    },
  },
};
</script>
<style lang="less" scoped>
.itemSTyle {
  position: relative;
}
.buttonStyle {
  position: absolute;
  right: 0;
  color: #fff;
  background-color: #fb575e;
}
.spanStyle {
  display: inline-block;
  text-align: right;
  width: 100px;
}
.labelStyle {
  display: inline-block;
  text-align: right;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.labelStyles {
  display: inline-block;
  text-align: left;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.indexStyle {
  display: inline-block;
  height: 21px;
  width: 33.33%;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
}
.boxStyle {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}
.spanStylek {
  display: inline-block;
  width: 290px;
}
.Maxbox {
  height: 600px;
  overflow: auto;
}

.Maxbox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.Maxbox::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 122, 204);
  box-shadow: inset 0 0 5px rgba(0, 122, 204);
}
//滚动条底层颜色!
.Maxbox::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;

  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}
.dataStyle {
  margin-top: 30px;
  margin-bottom: 30px;
}
/deep/input:disabled::-webkit-input-placeholder {
  -webkit-text-fill-color: #3b9df8;
}
// input[placeholder].indexBOX{
//   color:#3B9DF8;
// }
.indexell {
  margin-top: 15px;
  color: transparent;
}
</style>